<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue-router.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			{{msg}}<br>
			<router-link to="/login">登录</router-link>
			<router-link to="/register">注册</router-link>
			<router-view></router-view>
		</div>

		<script type="text/javascript">
			var login = {
				template: '<h1>登录</h1>'
			}
			var register = {
				template: '<h1>注册</h1>'
			}

			var router = new VueRouter({
				routes: [{
						path: '/',
						redirect: '/login'
					},
					{
						path: '/login',
						component: login
					},
					{
						path: '/register',
						component: register
					},
				]
			});
			new Vue({
				el: '#app',
				data:{
					msg:''
				},
				router,
				watch:{
					/* 这里必须要一个字符串 */
					'$route.path':function (newValue,oldValue) {
						if(newValue==='/login'){
							this.msg='这是使用监听获得的msg  login'
						}else if(newValue==='/register')
							this.msg='这是使用监听获得的msg  register'
					}
				}

			})
		</script>
	</body>
</html>
